<template>
  <div class="login">
    <img :src="imgSrc" width="100%" height="100%" alt=""/>
    <div class="loginPart">
      <h2>金讯通快速配送管理系统</h2>
      <el-select v-model="id"  placeholder="请选择">
        <el-option
            v-for="item in loginList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
        </el-option>
      </el-select>
      <hr/>
      <el-form ref="loginFormRef" :model="loginFormModel" :rules="loginFormRules">
        <div class="inputElement">
          <el-form-item prop="phone">
            <el-input v-model="loginFormModel.phone" placeholder="请输入手机号"></el-input>
          </el-form-item>
        </div>
        <div class="inputElement" style="margin-top: 20px">
          <el-form-item prop="pass">
            <el-input v-model="loginFormModel.pass" show-password placeholder="请输入密码"></el-input>
          </el-form-item>
        </div>
        <div style="margin-top: 20px">
          <el-button type="primary" @click.enter="login">登录</el-button>
        </div>
        <div style="text-align: right;color: white;">
          <a href="#" style="color: orange;text-decoration: none" @click="loginCustomer">没有账号？使用手机号注册</a>
        </div>
      </el-form>
    </div>
    <!--新增对话框-->
    <el-dialog title="新增用户信息"  :visible.sync="dialogFormVisible" @close="clearForm" center>
      <el-form :model="form" :rules="rules" ref="ruleForm">
        <el-form-item label="用户电话" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="form.phone" autocomplete="off" placeholder="请输入用户电话"></el-input>
        </el-form-item>
        <el-form-item label="用户名称" :label-width="formLabelWidth" prop="name">
          <el-input v-model="form.name" autocomplete="off" placeholder="请输入用户名称"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="pass" >
          <el-input v-model="form.pass" autocomplete="off" placeholder="请输入密码" type="password"></el-input>
        </el-form-item>
        <el-form-item label="订购电话" :label-width="formLabelWidth" prop="orderPhone">
          <el-input v-model="form.orderPhone" autocomplete="off" placeholder="请输入订购电话"></el-input>
        </el-form-item>
        <el-form-item label="客户星级" :label-width="formLabelWidth" prop="customerStarId">
          <el-select v-model="form.customerStarId" placeholder="请选择客户星级">
            <el-option
                v-for="item in customerStarDate"
                :key="item.id"
                :label="item.grade"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="月度用量" :label-width="formLabelWidth" prop="monthUsage" >
          <el-input v-model="form.monthUsage" autocomplete="off" placeholder="月度用量" readonly></el-input>
        </el-form-item>
        <el-form-item label="请选择所在省" :label-width="formLabelWidth" prop="province">
          <el-select v-model="form.province" clearable placeholder="请选择省">
            <el-option
                v-for="item in provinceList"
                :key="item.id"
                :label="item.name"
                :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择所在市" :label-width="formLabelWidth" prop="city">
          <el-select v-model="form.city" clearable placeholder="请选择市" >
            <el-option
                v-for="item in cityList"
                :key="item.id"
                :label="item.name"
                :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择所在区" :label-width="formLabelWidth" prop="district">
          <el-select v-model="form.district" clearable placeholder="请选择区">
            <el-option
                v-for="item in districtList"
                :key="item.id"
                :label="item.name"
                :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请输入详细地址" :label-width="formLabelWidth" prop="detailedAddress">
          <el-input v-model="form.detailedAddress" autocomplete="off" placeholder="请输入详细地址"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input
              type="textarea"
              :rows="2"
              placeholder="请输入内容"
              v-model="form.remark">
          </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ensure">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>


<script>
export default {
  name: "Login",
  data() {
    let validatePhone=(rule, value, callback)=>{
      if(/^(13[0-9]|14[5|7]|15[0-9]|17[0-9]|18[0-9])\d{8}$/.test(value)){
        callback();
      }else {
        callback(new Error('请输入合法的电话号码'));
      }
    }
    let validateOrderPhone=(rule, value, callback)=>{
      if(/^(13[0-9]|14[5|7]|15[0-9]|17[0-9]|18[0-9])\d{8}$/.test(value)){
        callback();
      }else {
        callback(new Error('请输入合法的电话号码'));
      }
    }
    return {
      imgSrc: require('../assets/img/login1.jpg'),
      loginFormModel: {
        phone: '',
        pass: ''
      },
      id:1,
      loginList:[
        {
          id:1,
          name:'   客户登录'
        },
        {
          id:2,
          name:'   配送员登录'
        },
        {
          id:3,
          name:'  调度员登录'
        },
        {
          id:4,
          name:'  店铺登录'
        },
        {
          id:5,
          name:'  平台登录'
        }
      ],
      loginFormRules: {
        phone: [
          {required: true, message: '请输入用户名', trigger: 'blur'}
        ],
        pass: [
          {required: true, message: '请输入密码', trigger: 'blur'}
        ]
      },
      rules:{
        phone:[
          { required: true, message: '请输入用户电话', trigger: 'blur' },
          { validator: validatePhone, trigger: 'blur' }
        ],
        name:[
          { required: true, message: '请输入用户名称', trigger: 'blur' },
        ],
        pass:[
          { required: true, message: '请输入用户密码', trigger: 'blur' },
        ],
        orderPhone:[
          { required: true, message: '请输入订购电话', trigger: 'blur' },
          { validator: validateOrderPhone, trigger: 'blur' }
        ],
        customerStarId:[
          { required: true, message: '请选择用户星级', trigger: 'blur' },
        ],
        province:[
          { required: true, message: '请选择省份', trigger: 'blur' },
        ],
        city:[
          { required: true, message: '请选择市', trigger: 'blur' },
        ],
        district:[
          { required: true, message: '请选择区', trigger: 'blur' },
        ],
        detailedAddress:[
          { required: true, message: '请输入详细地址', trigger: 'blur' },
        ]
      },
      dialogFormVisible:false,
      formLabelWidth:'120px',
      customerStarDate: [],
      form: {
        id:'',
        phone: '',
        name: '',
        pass: '',
        orderPhone: '',
        customerStarId: '',
        monthUsage:0,
        remark:'',
        province:'',
        city:'',
        district:'',
        detailedAddress:'',
      },
      provinceList:[
        {
          id:1,
          name:'陕西省'
        }
      ],
      cityList:[
        {
          id:1,
          name:'西安市'
        }
      ],
      districtList:[
        {
          id:1,
          name:'雁塔区'
        },
        {
          id:2,
          name:'长安区'
        },
        {
          id:3,
          name:'未央区'
        },
        {
          id:4,
          name:'碑林区'
        },
        {
          id:5,
          name:'莲湖区'
        }
      ],
    }
  },
  created() {
    this.loadCustomerStar()
  },
  methods: {
    clearForm(){
      this.form.id='',
          this.form.phone= '',
          this.form.name= '',
          this.form.pass='',
          this.form.orderPhone= '',
          this.form.customerStarId= '',
          this.form.monthUsage=0,
          this.form.remark='',
          this.form.province='',
          this.form.city='',
          this.form.district='',
          this.form.detailedAddress='',
      this.$refs.ruleForm.resetField()
    },
    loginCustomer(){
      this.dialogFormVisible=true
    },
    //加载客户星级
    async loadCustomerStar() {
      let res = await this.$axios.get('/customerStar/queryAll')
      this.customerStarDate = res.data.data
    },
    //对话框确定按钮
    ensure() {
      this.$refs.ruleForm.validate(async valid=> {
        if (valid) {
          console.log(this.form)
          let res =await this.$axios.get('/customer/save',{
            params:this.form
          })
          if(res.data.code===200){
            this.dialogFormVisible=false
            this.init()
          }else {
            alert("操作失败")
          }
        } else {
          return false;
        }
      })
    },
    login() {
      this.$refs.loginFormRef.validate(async (valid) => {
        if (valid) {
          let url
          if(this.id===1){
            url='/customer/login'
          }
          if(this.id===2){
            url='/courier/login'
          }
          if(this.id===3){
            url='/yardman/login'
          }
          if(this.id===4){
            url='/manager/login'
          }
          if(this.id===5){
            url='/admin/login'
          }
          let res = await this.$axios.get(url, {
            params: this.loginFormModel
          })
          if (res.data.code === 200) {
            this.$message({
              message: '登录成功！',
              type: 'success'
            });
            window.sessionStorage.setItem('user', JSON.stringify(res.data.data))
            if(this.id===1){
              this.$router.push('/consumer')
            }
            if(this.id===2){
              this.$router.push('/delivery')
            }
            if(this.id===3){
              this.$router.push('/allocation')
            }
            if(this.id===4){
              this.$router.push('/shopPage')
            }
            if(this.id===5){
              this.$router.push('/')
            }

          } else {
            this.$message({
              message: '用户名或密码有误！',
              type: 'error'
            });
          }
          // }

        } else {
          this.$message({
            message: '该用户不存在，请先注册！',
            type: 'error'
          });
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.loginFormRef.resetFields()
    }

  }

}
</script>

<style scoped>
.loginPart {
  position: absolute;
  /*定位方式绝对定位absolute*/
  top: 50%;
  left: 50%;
  /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
  transform: translate(-50%, -50%);
  /*实现块元素百分比下居中*/
  width: 450px;
  padding: 50px;
  background: rgba(0, 0, 0, .5);
  /*背景颜色为黑色，透明度为0.8*/
  box-sizing: border-box;
  /*box-sizing设置盒子模型的解析模式为怪异盒模型，
  将border和padding划归到width范围内*/
  box-shadow: 0px 15px 25px rgba(0, 0, 0, .5);
  /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
  border-radius: 15px;
  /*边框圆角，四个角均为15px*/
}

.loginPart h2, h3 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
  /*文字居中*/
}

.loginPart .inputbox {
  position: relative;
}

.loginPart .inputElement input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  letter-spacing: 1px;
  /*字符间的间距1px*/
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  /*outline用于绘制元素周围的线
  outline：none在这里用途是将输入框的边框的线条使其消失*/
  background: transparent;
  /*背景颜色为透明*/
}

.login {
  width: 100%;
  height: 100%;
}
</style>